<template>
	<view class="container">
		<u-navbar :title="$t('team.title')" placeholder bgColor="transparent" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF"  :rightText="$t('team.right_title')" @rightClick="hanldeRule" autoBack>
		</u-navbar>

		<view class="content">
			<view class="head_team mar-top-40">
				<view class="flex align-center">
					<image class="avatar_ai" src="/static/image/avatar_ai.png" mode="" />
					<text class="mar-left-25 font-28">{{$t('team.current_experience_value')}} 0</text>
				</view>

				<image class="grade" src="/static/image/Lv1.png" mode="" />
			</view>
			<view class="mar-top-40 mar-bottom-40">
				<ruler-line />
			</view>

			<view class="cell-boxes">
				<u-cell-group :border="false">
					<u-cell :title="$t('team.membership_information')" isLink :value="$t('team.more')"></u-cell>
					<u-cell :value="$t('team.people')">
						<template #title>
							<view class="custom-cell-title">
								<image src="/static/image/Lv1.png" mode=""></image>
								<text>{{$t('team.level_one')}}</text>
							</view>
						</template>
					</u-cell>
					<u-cell :value="$t('team.people')">
						<template #title>
							<view class="custom-cell-title">
								<image src="/static/image/Lv2.png" mode=""></image>
								<text>{{$t('team.level_two')}}</text>
							</view>
						</template>
					</u-cell>
					<u-cell :value="$t('team.people')">
						<template #title>
							<view class="custom-cell-title">
								<image src="/static/image/Lv3.png" mode=""></image>
								<text>{{$t('team.level_three')}}</text>
							</view>
						</template>
					</u-cell>
				</u-cell-group>
			</view>

			<view class="cell-boxes mar-top-25">
				<u-cell-group :border="false">
					<u-cell :title="$t('team.team_rewards')" isLink :value="$t('team.more')"></u-cell>
				</u-cell-group>

				<view class="team-rewards">
					<view class="grid">
						<text class="grid-label">{{$t('team.today')}}</text>
						<text class="grid-value">0.000000</text>
					</view>
					<view class="grid">
						<text class="grid-label">{{$t('team.this_week')}}</text>
						<text class="grid-value">0.000000</text>
					</view>
					<view class="grid">
						<text class="grid-label">{{$t('team.whole')}}</text>
						<text class="grid-value">0.000000</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<robot></robot>
</template>

<script setup>
	import rulerLine from './components/ruler-line/index.vue'
	// 推荐规则
	const hanldeRule = () => {
		uni.navigateTo({
			url: '/pages/show-rich-text/show-rich-text?type=recommendation'
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.u-navbar__content__right__text) {
		color: #FFFFFF;
	}

	:deep(.u-cell__body) {
		padding: 30rpx 30rpx 25rpx 30rpx;
	}

	page {
		background: #f5f6fa;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		background: url('/static/image/tram_head_bg.png') no-repeat;
		background-size: 100% 880rpx;

		.content {
			padding: 0 30rpx;
			box-sizing: border-box;

			.head_team {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.avatar_ai {
					width: 96rpx;
					height: 96rpx;
				}

				.grade {
					width: 156rpx;
					height: 175rpx;
				}
			}

			.cell-boxes {
				background: #FFFFFF;
				border-radius: 20rpx;

				.custom-cell-title {
					display: flex;
					align-items: center;

					image {
						width: 28.03px;
						height: 31.44px;
						margin-right: 10rpx;
					}
				}

				.team-rewards {
					display: flex;
					align-items: center;
					min-height: 161.66rpx;
					padding: 0 30rpx;
					gap: 55rpx;

					.grid {
						flex: 1;
						display: flex;
						flex-direction: column;
						line-height: 1.8;

						.grid-label {
							font-size: 26rpx;
							color: #999999;
						}

						.grid-value {
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>